<!-- Json -->
<template>
    <div class="doc-content-wrapper">
        <div class="doc-content-container">
            <div class="doc-content">
                <h1 class="text-4xl mb-6">Json</h1>

                <h2 class="mb-5 flex items-center"><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse" target="_blank">JSON.parse()方法</a><el-tag class="ml-2">ES5</el-tag></h2>
                <p class="mb-3 text-base">JavaScript 函数 JSON.parse() 用于将文本转换为 JavaScript 对象</p>
                <Codemirror :code="parseCode" name="JSON.parse()" class="mb-10" />

                <h2 class="mb-5 flex items-center"><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify" target="_blank">JSON.stringify()方法</a><el-tag class="ml-2">ES5</el-tag></h2>
                <p class="mb-3 text-base">JavaScript 函数 JSON.stringify() 将其转换为字符串</p>
                <Codemirror :code="stringifyCode" name="JSON.stringify()" class="mb-10" />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    setup () {
        const parseCode = ref(`const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.count);
// Expected output: 42

console.log(obj.result);
// Expected output: true`)

        const stringifyCode = ref(`console.log(JSON.stringify({ x: 5, y: 6 }));
// Expected output: "{"x":5,"y":6}"

console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
// Expected output: "[3,"false",false]"

console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }));
// Expected output: "{"x":[10,null,null,null]}"

console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));
// Expected output: ""2006-01-02T15:04:05.000Z""`)

        return {
            parseCode,
            stringifyCode,
        }
    }
})
</script>

<style scoped>

</style>